// var App = {
//   data () {
//     return {
//       isShowImg1: false,
//       isShowImg2: false,
//       maxSize: 500,
//       img1Url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F0512210S559%2F2105120S559-10-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672035348&t=c4d531ebe8bb3bbf5b8a4545e0f6c8ce', 
//       img2Url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F040221103339%2F210402103339-7-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672035348&t=75b1877d196f84edb4cb415275850ceb'
//       // 需要执行 data() -> 挂载到 $data -> 挂在vm上
//     }
//   },
//   template: `
//     <div>
//       <div>
//         <img v-if="isShowImg1" :src="img1Url" :width="maxSize"/>
//         <img v-show="isShowImg2" :src="img2Url" :width="maxSize" />
//       </div>
//       <button @click="showImg1"> 显示图片1 </button>
//       <button @click="showImg2"> 显示图片2 </button>
//     </div>
//   `,
//   methods: {
//     showImg1() {
//       this.isShowImg1 = !this.isShowImg1;
//       // this 需要指向 vm 实例 -》不仅需要获取 methods 方法， 也需要获取 $data -> 能读取数据值 -> vm 容器
//     },
//     showImg2() {
//       this.isShowImg2 = !this.isShowImg2;
//     }
//   }
// }

// const vm = createApp(App).mount('#app')
// console.log(vm)

// -------------------------------------

import Vue from '../modules/Vue'

const vm = new Vue({
  el: '#app',
  data () {
    return {
      isShowImg1: true,
      isShowImg2: true,
      maxSize: 500,
      img1Url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F0512210S559%2F2105120S559-10-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672035348&t=c4d531ebe8bb3bbf5b8a4545e0f6c8ce', 
      img2Url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F040221103339%2F210402103339-7-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672035348&t=75b1877d196f84edb4cb415275850ceb'
      // 需要执行 data() -> 挂载到 $data -> 挂在vm上
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  create() {
    console.log('create')
  },
  beforeMounted() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
    this.isShowImg1 = false
    this.isShowImg2 = false
  },
  template: `
    <div>
      <div>
        <img v-if="isShowImg1" :src="img1Url" :width="maxSize"/>
        <img v-show="isShowImg2" :src="img2Url" :width="maxSize" />
      </div>
      <button @click="showImg1"> 显示图片1 </button>
      <button @click="showImg2"> 显示图片2 </button>
    </div>
  `,
  methods: {
    showImg1() {
      this.isShowImg1 = !this.isShowImg1;
      // this 需要指向 vm 实例 -》不仅需要获取 methods 方法， 也需要获取 $data -> 能读取数据值 -> vm 容器
    },
    showImg2() {
      this.isShowImg2 = !this.isShowImg2;
    }
  }
})

console.log(vm)